<template>
  <div class="show-check">
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      class="form"
    >
      <el-form-item label="审批操作:">
        <el-radio
          v-model="form.checkout"
          label="1"
          @change="onRadioChange"
        >
          通过
        </el-radio>
        <el-radio
          v-model="form.checkout"
          label="0"
          @change="onRadioChange"
        >
          不通过
        </el-radio>
      </el-form-item>
      <div
        class="input"
      >
        <el-form-item
          v-if="!hideInput"
          label="审批意见:"
        >
          <el-input
            v-model="form.message"
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item
          v-else
          label=""
        />
        <div
          v-if="!hideInput"
          class="audit-info"
        >
          <div
            v-for="item in auditInfoList"
            :key="item.index"
            class="item-info"
          >
            <el-button
              type="primary"
              plain
              @click="auditInfo(item.info)"
            >
              {{ item.info }}
            </el-button>
          </div>
        </div>
      </div>
      <el-form-item>
        <div
          v-if="infoType==='1'"
          class="buttom-button"
        >
          <el-button
            v-if="checkresult==='first'"
            type="primary"
            @click="submit"
          >
            提交
          </el-button>
          <el-button
            v-else
            type="primary"
            @click="edit"
          >
            提交
          </el-button>
          <el-button
            plain
            @click="reset"
          >
            重置
          </el-button>
        </div>
        <div
          v-if="infoType==='2'"
          class="buttom-button"
        >
          <el-button
            type="primary"
            @click="allSubmit"
          >
            提交
          </el-button>
          <el-button
            plain
            @click="reset"
          >
            重置
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { insertResult, edit } from '@/api/service/gisShow2020';

export default {
  name: 'ShowCheck',
  props: {
    infodata: {
      type: Object,
      default: () => {},
    },
    check: {
      type: Object,
      default: () => {},
    },
    planId: {
      type: String,
      default: '',
    },
    localConfig: {
      type: Object,
      default: () => {},
    },
    activeId: {
      type: String,
      default: '',
    },
    activeName: {
      type: String,
      default: '',
    },
    useraccount: {
      type: String,
      default: '',
    },
    infoType: {
      type: String,
      default: '1',
    },
  },
  data() {
    return {
      checkresult: '',
      hideInput: false,
      form: {
        checkout: '',
        message: '',
      },
      // 快速审核意见填写
      auditInfoList: [
        { index: 1, info: '图片不清晰' },
        { index: 2, info: '没有打印标签' },
        { index: 3, info: '成端不正确' },
        { index: 4, info: '打点经纬度不正确' },
      ],
    };
  },
  computed: {
    isage() {
      return this.form.checkout;
    },
  },
  watch: {
    check() {
      this.init();
    },
    isage() {
      if (this.isage === '1') {
        this.hideInput = true;
      } else {
        this.hideInput = false;
      }
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if (this.check === {} || this.check.is_check === '' || this.check.is_check === undefined) {
        this.checkresult = 'first';
        this.form.checkout = '1';
        this.form.message = '通过';
        this.hideInput = true;
      } else {
        this.checkresult = '';
        this.form.checkout = String(this.check.is_check);
        this.form.message = this.check.check_reason;
      }
      // this.$emit('getcheck', this.infodata.id, this.form.checkout);
    },
    allSubmit() {
      this.$emit('all-audit', this.form.checkout);
    },
    onRadioChange() {
      if (this.form.checkout === '1') {
        this.form.message = '通过';
      } else {
        this.form.message = '不通过';
      }
    },
    // 快速填写审核意见
    auditInfo(info) {
      this.form.message = info;
    },
    // 提交审核操作和意见
    async submit() {
      const type = this.infodata.type.split('_');
      const params = {
        seg_id: this.activeId,
        seg_name: this.activeName,
        plan_id: this.planId,
        check_account: this.useraccount,
        modify_account: this.useraccount,
        resource_id: this.infodata.id,
        resource_type: type[0],
        resource_name: this.infodata.name,
        is_check: Number(this.form.checkout),
        check_reason: this.form.message,
      };
      const data = await insertResult(params);
      if (String(data.data.success) === 'true') {
        this.$emit('submit-success', params.resource_id, params.is_check);
        this.$message.success('提交成功');
      } else {
        this.$message.error('提交失败');
      }
    },
    // 修改审核操作和意见
    async edit() {
      const type = this.infodata.type.split('_');
      const params = {
        seg_id: this.activeId,
        seg_name: this.activeName,
        plan_id: this.planId,
        check_account: this.useraccount,
        modify_account: this.useraccount,
        resource_id: this.infodata.id,
        resource_type: type[0],
        resource_name: this.infodata.name,
        is_check: Number(this.form.checkout),
        check_reason: this.form.message,
      };
      const data = await edit(params);
      if (String(data.data.success) === 'true') {
        this.$emit('submit-success', params.resource_id, params.is_check);
        this.$message.success('提交成功');
      } else {
        this.$message.error('提交失败');
      }
    },
    // 重置审核操作和意见
    reset() {
      this.form.checkout = null;
      this.form.message = null;
    },
  },
};
</script>

<style lang="scss" scoped>
  .show-check {
    .button {
      margin-left: 27%;
    }
    .input {
      margin-right:7%;
      height: 121px;
    }
  }
  .buttom-button{
    margin-top: 20px;
    text-align: center;
  }
  .audit-info{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 10px 0px 0px 80px;
    .item-info{
      margin-right: 16px;
    }
  }
  .el-form-item{
    margin-bottom: 10px;
  }
</style>
